<template>
  <view class="viewpoint">
    <view class="filter-box">
      <view class="left">
        <uni-data-select
          style="width: 100%"
          placeholder="楼栋"
          v-model="form.building"
          :localdata="range"
          @change="BuildingChange"
        ></uni-data-select>
      </view>
      <view class="right">
        <!-- <view class="search">
          <input placeholder="搜索" placeholder-class="input-placeholder" />
        </view>
        <text style="font-size: 28rpx; color: #b8d587; margin-left: 10rpx"
          >搜索</text
        > -->
      </view>
    </view>
    <view class="time-box">
      <view class="example-body">
        <uni-datetime-picker
          returnType="timestamp"
          v-model="form.startTime"
          hide-second="true"
          @change="changeTime"
          placeholder="预约起始时间"
          :start="Date.now()"
        />
      </view>
      <view class="example-body">
        <uni-datetime-picker
          returnType="timestamp"
          v-model="form.endTime"
          hide-second="true"
          @change="changeTime"
          placeholder="预约结束时间"
          :start="form.startTime || Date.now()"
        />
      </view>
    </view>
    <scroll-view scroll-y class="scroll-view">
      <view
        style="
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        "
      >
        <view
          class="classRoom"
          @tap="seeDetail(item)"
          v-for="item in classRoom"
          :key="item.id"
        >
          <!-- 判断不是教师专区&&正在审核 -->
          <view
            class="Room-info"
            v-if="item.teacherOnly === 0 && item.classRoomStatus === '1'"
          >
            <view class="room-name">{{ item.name }}</view>
            <view class="room-review" @tap.stop="toReview(item)">查看评论</view>
            <view class="room-book" @tap.stop="toBookInfo(item)">预约</view>
            <view class="room-havebook">正在审核</view>
          </view>
          <!-- 判断是教师专区&&正在审核 -->
          <view
            class="Room-info"
            v-if="item.teacherOnly === 1 && item.classRoomStatus === '1'"
          >
            <view class="room-name">{{ item.name }}</view>
            <view class="room-review" @tap.stop="toReview(item)">查看评论</view>
            <view class="room-book" @tap.stop="toBookInfo(item)">预约</view>
          </view>
          <!-- 判断不是教师专区&&可预约 -->
          <view
            class="Room-info"
            v-if="item.teacherOnly === 0 && item.classRoomStatus === '0'"
          >
            <view class="room-name">{{ item.name }}</view>
            <view class="room-review" @tap.stop="toReview(item)">查看评论</view>
            <view class="room-book" @tap.stop="toBookInfo(item)">预约</view>
          </view>
          <!-- 判断不是教师专区&&不可预约 -->
          <view
            class="Room-info"
            v-if="item.teacherOnly === 0 && item.classRoomStatus === '2'"
          >
            <view class="room-name">{{ item.name }}</view>
            <view class="room-review" @tap.stop="toReview(item)">查看评论</view>
            <view class="room-book" style="background-color: #bd3124"
              >被预约</view
            >
          </view>
          <!-- 判断是教室专区&&可预约 -->
          <view
            class="Room-info"
            v-if="item.teacherOnly === 1 && item.classRoomStatus === '0'"
          >
            <view class="room-name">{{ item.name }}</view>
            <view class="room-review" @tap.stop="toReview(item)">查看评论</view>
            <view class="room-book" @tap.stop="toBookInfo(item)"
              >预约(教师)</view
            >
          </view>
          <!-- 判断是教室专区&&不可预约 -->
          <view
            class="Room-info"
            v-if="item.teacherOnly === 1 && item.classRoomStatus === '2'"
          >
            <view class="room-name">{{ item.name }}</view>
            <view class="room-review" @tap="toReview(item)">查看评论</view>
            <view class="room-book" style="background-color: #bd3124"
              >被预约(教师)</view
            >
          </view>
          <view class="Room-content">
            可容纳{{ item.peopleNum }}人，{{
              item.airCon === 1 ? "有空调" : "无空调"
            }}，{{ item.projector === 1 ? "有投影仪" : "无投影仪" }}
          </view>
        </view>
      </view>
    </scroll-view>
    <!-- 查看评论 -->
    <uni-popup ref="popup">
      <scroll-view
        v-if="command?.length > 0"
        scroll-y="false"
        class="popup-content"
      >
        <view v-for="item in command" :key="item.id" class="pinlun">
          <view class="name"
            >{{ item.username }}&nbsp;{{
              moment(item.createTime).format("YYYY-MM-DD HH:mm:ss")
            }}</view
          >
          <view class="pinlun-content">{{ item.comment }}</view>
        </view>
      </scroll-view>
    </uni-popup>
    <uni-popup ref="popup2">
      <view class="detail-content">
        <view class="header">
          <view style="font-weight: bold; color: #951d1d">{{
            roomDetail.name
          }}</view>
          <view style="font-size: 28rpx; margin-top: 10rpx"
            >可容纳{{ roomDetail.peopleNum }}人，{{
              roomDetail.airCon === 1 ? "有空调" : "无空调"
            }}，{{ roomDetail.projector === 1 ? "有投影仪" : "无投影仪" }}</view
          >
        </view>
        <scroll-view class="scr-detail" scroll-y>
          <h2 style="text-align: center; color: #951d1d">
            该教室今日以下时间不可预约！
          </h2>
          <view v-for="item in notApppontTime" :key="item" class="time-item"
            >{{ item }}
          </view>
        </scroll-view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { InfoStore } from "../../store/index";
import {
  getClassroom,
  building,
  getComment,
  getUnbookableTime,
} from "../../utils/booking";

import moment from "moment";
const classRoom = ref([]); //教室列表
const range = ref([]); //楼栋列表
const value = ref(""); //选择楼栋
const notApppontTime = ref([]);
const form = ref({
  startTime: 0,
  endTime: 0,
  building: "",
});
const roomDetail = ref({});
const command = ref([]);
const popup = ref(null);
const popup2 = ref(null);
const infoStore = InfoStore();
//获取楼栋教室列表
const getClassroomDetail = async () => {
  const res = await getClassroom(form.value);
  if (res?.data?.code === 200) {
    classRoom.value = res?.data?.data;
  }
};
//获取楼栋列表
const getBuilding = async () => {
  const res = await building();
  range.value = res?.data?.data.map((item) => {
    return { value: item, text: item };
  });
};
//楼栋列表改变
const BuildingChange = () => {
  console.log(form.value);
  getClassroomDetail(form.value);
};
//改变预约时间
const changeTime = () => {
  // console.log(moment(form.value.startTime).format("YYYY-MM-DD HH:mm:ss"));
  // console.log(moment(form.value.endTime).format("YYYY-MM-DD HH:mm:ss"));
  getClassroomDetail(form.value);
};
//查看评论
const toReview = async (item) => {
  const res = await getComment(item.id);
  if (res?.data?.code === 200) {
    command.value = res?.data?.data;
    if (command.value?.length === 0) {
      return uni.showToast({
        title: "暂无评论",
        icon: "none",
      });
    }
    popup.value.open("center");
  }
};
//预约详情
const toBookInfo = (item) => {
  if (item.teacherOnly === 1) {
    if (infoStore?.LoginInfo?.identity === 1) {
      return uni.showToast({
        title: "没有权限",
        icon: "error",
      });
    }
  }
  // return false;
  if (form.value.endTime < form.value.startTime) {
    return uni.showToast({
      title: "预约时间出错",
      icon: "error",
    });
  }
  if (form.value.startTime === 0 || form.value.endTime === 0) {
    return uni.showToast({
      title: "请选择预约时间",
      icon: "error",
    });
  }
  uni.navigateTo({
    url: `/pageA/bookinfo/bookinfo?id=${item.id}&start=${form.value.startTime}&end=${form.value.endTime}&name=${item.name}`,
  });
};
//点击查看教室详情
const seeDetail = async (item) => {
  roomDetail.value = item;
  const res = await getUnbookableTime(item.id);
  if (res?.data?.code === 200) {
    notApppontTime.value = res?.data?.data.notAppontTime;
  }
  popup2.value.open("center");
};
onLoad((options) => {
  form.value.building = options?.building;
  Promise.all([getBuilding(), getClassroomDetail(form.value)]);
});
onShow((options) => {
  // form.value.building = options?.building;
  Promise.all([getBuilding(), getClassroomDetail(form.value)]);
});
</script>

<style lang="scss" >
page {
  height: 100%;
  background: linear-gradient(to bottom, #f8f8f8, #edf6e3, #cff2a2);
}
.viewpoint {
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 10rpx;
  .filter-box {
    display: flex;
    height: 80rpx;
    justify-content: space-between;
    .left,
    .right {
      height: 100%;
      width: 320rpx;
      display: flex;
      align-items: center;
    }
    .right {
      line-height: 80rpx;
      .search {
        display: flex;
        align-items: center;
        border-radius: 10rpx;
        height: 60rpx;
        width: 250rpx;
        background-color: #fff;
        border: #e7e7e7 1px solid;
        input {
          margin-left: 10rpx;
        }
        .input-placeholder {
          font-size: 28rpx;
        }
      }
    }
  }
  .time-box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .example-body {
      width: 350rpx;
    }
  }
  .scroll-view {
    height: calc(100vh - 200rpx);
    margin-top: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .classRoom {
      width: 650rpx;
      height: 150rpx;
      border: #ccc solid 1px;
      border-radius: 20rpx;
      margin-bottom: 20rpx;
      padding: 10rpx;
      position: relative;
      .Room-info {
        width: 100%;
        height: 50rpx;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 50rpx;

        .room-name {
          text-align: left;
          font-size: 30rpx;
          line-height: 50rpx;
          font-weight: bold;
        }
        .room-review {
          background: #e99d42;
          border-radius: 10rpx;
          color: #fff;
          font-size: 26rpx;
          text-align: center;
          line-height: 50rpx;
          font-weight: bold;
          margin: 0 10rpx;
        }
        .room-book {
          background: #b8d587;
          border-radius: 10rpx;
          color: #fff;
          font-size: 26rpx;
          text-align: center;
          line-height: 50rpx;
          font-weight: bold;
          margin: 0 10rpx;
        }
        .room-havebook {
          position: absolute;
          background: #ce822c;
          border-radius: 10rpx;
          color: #fff;
          font-size: 26rpx;
          text-align: center;
          line-height: 50rpx;
          font-weight: bold;
          padding: 2rpx 10rpx;
          margin: 0 10rpx;
          bottom: 10rpx;
          right: 10rpx;
        }
      }
    }
    .Room-content {
      margin-top: 20rpx;
      height: 50rpx;
      text-align: left;
      font-size: 28rpx;
    }
  }
}
.popup-content {
  width: 600rpx;
  height: 800rpx;
  background-color: #fff;
  padding: 20rpx;
  box-sizing: border-box;
  border-radius: 20rpx;
  .pinlun {
    border-bottom: #ccc solid 1px;

    .name {
      height: 40rpx;
      line-height: 40rpx;
      font-size: 28rpx;
    }
    .pinlun-content {
      padding: 20rpx 0;
      font-size: 28rpx;
      font-weight: bold;
      margin-bottom: 10rpx;
      background-color: #fff;
    }
  }
}
.Empty {
  background-color: #fff;
}
.detail-content {
  width: 500rpx;
  height: 600rpx;
  background-color: #b8d587;
  border-radius: 20rpx;
  padding: 20rpx;
  .header {
    height: 100rpx;
    border-bottom: #989696 solid 2rpx;
    text-align: center;
  }
  .scr-detail {
    margin-top: 10rpx;
    color: #972823;
    font-size: 28rpx;
    font-weight: bold;
    text-align: center;
    max-height: 450rpx;
    .time-item {
      margin-top: 10rpx;
    }
  }
}
.uni-section .uni-section-header {
  padding: 0 !important;
  width: 100% !important;
}
.uni-section {
  width: 320rpx !important;
}
</style>